import React, { useState, useRef, useEffect } from 'react';
import '../antd.css';
import { Redirect } from 'react-router-dom';
import { obj_str, loc_lang_change, BtLarge, CenterView, uDb, WhiteInput, loc } from 'sui';
import { User, CurModel } from 'cache';

const Login = ({ sig, children, redirect }) => {
    const [fin, setFin] = useState("login");
    const [info, setInfo] = useState("");
    const user_ref = useRef(null);
    const pass_ref = useRef(null);

    const [value, setValue] = useState({
        user: User.userName() || "",
        passwd: ""
    });

    useEffect(() => {
        if (User.userName()) {
            pass_ref.current.focus();
        }
        else {
            user_ref.current.focus();
        }
    }, []);

    const handleInput = (name, val) => {
        setValue({
            ...value,
            [name]: val
        });
    };

    const handleLogin = () => {
        const { user, passwd } = value;

        if (!user) {
            setInfo(loc("l_223"));
            return;
        }

        if (!passwd) {
            setInfo(loc("l_224"));
            return;
        }

        if (user.length <= 0 || passwd.length <= 0) {
            setInfo(loc("l_225"));
            return;
        }

        uDb(null, "user/login",
            {
                "line": CurModel.getLine(),
                "sn": user,
                "passwd": passwd,
                "auth": true,
            },
            result => {
                User.addUser({
                    name: user,
                    uname: obj_str(result, "name"),
                    login: true,
                    auth: obj_str(result, "auth"),
                    access: obj_str(result, "access"),
                });

                setFin("pass");
            },
            e => {
                User.addUser({
                    name: user,
                    login: false
                });

                setFin("login");
                setInfo(loc("l_225"));
                setValue({
                    ...value,
                    passwd: ""
                });
            }
        );
    };

    const keyPress = (k) => {
        if (k === "Enter") {
            handleLogin();
        }
    };

    const getButton = () => {
        const Change = ({ className }) => {
            if (CurModel.get_lang() === "zhen") {
                return (
                    <BtLarge className={className} hcmd={() => {
                        loc_lang_change();
                        window.location.reload();
                    }}>{loc("l_337")}</BtLarge>
                );
            }

            return null;
        };

        if (sig) {
            return (
                <div className="flex flex-col items-center w-full">
                    <BtLarge name="login" hcmd={handleLogin} className="mt-8 w-11/12">{loc("l_226")}</BtLarge>
                    <Change className="mt-8 w-11/12"/>
                </div>
            );
        }

        return (
            <div className="flex flex-col items-center w-full">
                <BtLarge name="login" hcmd={handleLogin} className="mt-8 w-full">{loc("l_226")}</BtLarge>
                <BtLarge name="cancel" hcmd={() => setFin("line")} className="mt-8 w-full">{loc("l_227")}</BtLarge>
                <Change className="mt-8 w-full"/>
            </div>
        );
    }

    const getError = () => {
        if (info) {
            return (
                <div className="flex flex-col items-center text-white">
                    <span>{info}</span>
                </div>
            );
        }

        return null;
    };

    if (fin === "pass") {
        return <Redirect push to={redirect}/>
    }
    else if (fin === "line") {
        return (<div>{children}</div>);
    }
    else {
        const { user, passwd } = value;

        return (
            <CenterView>
                <div className="w-1/3">
                    <div>
                        <div className="mb-4">
                            <WhiteInput
                                name="user"
                                value={user}
                                href={user_ref}
                                hcmd={handleInput}
                                hkey={keyPress}
                                label={loc("l_223")} />
                        </div>
                        <div className="mb-4">
                            <WhiteInput
                                name="passwd"
                                href={pass_ref}
                                type="password"
                                label={loc("l_224")}
                                value={passwd}
                                hcmd={handleInput}
                                hkey={keyPress}
                            />
                        </div>
                        {getError()}
                        {getButton()}
                    </div>
                </div>
            </CenterView>
        );
    }
};

export {Login};
